For this project we created new and improved journeys to align with moving the Gymshark Shopify stores to a new headless environment. 
 

 

A dynamic and exciting homepage, encompassing richer components.

 

- Hero banners including new text positioning options.
- More advanced Hero cards supporting imagery and video media.
- SEO content tailored to enhance our ranking.
- New product rails including our new product tiles.

A more user-friendly navigation experience.

The new Navigation includes big improvements to mobile as well as some smaller quality-of-life improvements on desktop.

- New Search field UI added to the navigation
- More advanced Hero cards that support image and video media types.
- Dropdowns to support multiple-page links on mobile
- New language selector

Increase click-through from collection pages to product pages by allowing our products to stand out more and reduce noise whilst promoting key product details.

- Removed the image header due to no increase in conversion
- Reduced the page title size so that the Products take priority
- Moved the subcategories into the filter for a cleaner look. User feedback and data suggested moving these was the right thing to do.
- Sub-categories are renamed to be more friendly and are now called ‘styles’. This also helps define what content should go in this particular filter category.

- Simplified list UI, making it easier for the customer to make a choice.
- Filter now opens in a temporary view on desktop & mobile cleaning up the collection pages and focusing the user on the choices they are making
- Filter button is now sticky and always on the screen as the user scrolls
- Filter view is now much larger on mobile allowing users to see more options.
- Introduction of sub-categories into the filter from the page. Now called ‘Styles’

Much improved search experience including new features that allow users to find things faster.

- Trending searches
- Recent searches
- Recently viewed
- Advanced filtering
 -Search suggestions
- Search results pages

Increase Collection page to Product page conversion by improving quality and refining the detail presented on our product cards.

- Updated the UI of our tags and positioned them on top of the image to create more space below.
- Added the product "Fit" below the product name
- Removed the colour name and added the number of colours available on that product in line with user testing insight.
- Removed the decimal from pricing when (.00) to clean up the UI

Allowing the customer to better manage their cart while improving average order value using delivery thresholds.

- Addition of shipping thresholds to help increase average order value
- New clearer Product card UI and tags
- Stock reservation urgency messaging
- Addition of Delivery, Payment & Help information

- New order card UI to help users find and manage their orders
- Addition of a profile icon
- Clear order status indicators for each order
- More detailed order information page
- Product imagery added to better visually represent each order
- UI brought in line with the GS app

Outdated layout, unhelpful information, lack of order status awareness, and generally not inspiring or on brand.

- Tabs to quickly switch between logging in or signing up
- On desktop devices, we will show a carousel of account benefits enticing users to both sign-in and sign-up.
- Improved form field validation

- Ability to switch between size guide and fit guide information
- New calculator functionality to better calculate the right size based on body measurements
- More fit information and rich media to show how to measure properly